<template>
	<view class="box  u-abso  u-flex  ">
		<view class="u-flex-1 u-text-center">

			<view class="box-icon " @click="onIcon('before')">
				<u-icon name="arrow-left" color="#879BBA"></u-icon>

			</view>
			<text class="time-text">
				{{time | date}}
			</text>
			<view class="box-icon " :class="isEquaDay ? 'disabled':'' " @click="onIcon('after')">
				<u-icon name="arrow-right" color="#879BBA"></u-icon>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				time: new Date()
			}
		},
		computed: {
			isEquaDay() {
				return this.$options.filters.date(this.time) === this.$options.filters.date(new Date())
			},
		},
		methods: {
			onIcon(type) {

				let _time = ''
				if (type == 'before') {
					_time = new Date(this.time.setDate(this.time.getDate() - 1));
				} else {
					if (this.isEquaDay) {
						return
					}
					_time = new Date(this.time.setDate(this.time.getDate() + 1));
				}
				this.time = _time
				this.$u.debounce(() => {
					this.$emit('onTime', this.$options.filters.date(_time))
				}, 500)

			}
		}
	}
</script>

<style lang="scss">
	.box {
		z-index: 999;
		width: 100%;
		top: 0;
		left: 0;
		height: 100rpx;
		background: #FFFFFF;
		border-bottom: 2rpx solid #DEE2EE;

		&-icon {
			display: inline-block;
			width: 40rpx;
			height: 40rpx;
			background: #DEE2EE;
			border-radius: 8rpx;
		}
	}

	.disabled {
		background-color: #F5F7FA !important;
	}

	.time-text {
		display: inline-block;
		width: 370rpx;
		font-family: AlibabaPuHuiTi_2_55_Regular;
		font-weight: 400;
		font-size: 32rpx;
		color: #0F2E4D;
		text-align: center;
	}
</style>
